<template>
  <view class="container">
    <!-- 登录后用户卡片 -->
    <view v-if="user && user.userId" class="user-card">
      <image class="avatar" :src="user.avatar || '/static/icons/dog.png'"></image>
      <view class="user-info">
        <text class="phone">{{ user.phonenumber || '未绑定手机号' }}</text>
        <view class="member-info">
          <text class="add-text">
            {{ pets.length > 0 ? '已登记 ' + pets.length + ' 只宠物' : '请添宠物' }}
          </text>
        </view>
      </view>
      <!-- 直接跳转到宠物管理 -->
      <view class="more" @click="goPetManage">⇔</view>
    </view>

    <!-- 未登录卡片 -->
    <view v-else>
      <view class="login-card" @click="goLogin">
        <image class="avatar" src="/static/icons/dog.png"></image>
        <view class="login-info">
          <text class="login-title">立即登录</text>
        </view>
        <button class="login-btn">去登录</button>
      </view>

      <!-- 未登录 Banner：轮播图 -->
      <view class="unlogin-banner">
        <swiper autoplay circular indicator-dots interval="3000" duration="500" class="swiper">
          <swiper-item v-for="(img, index) in unloginBanners" :key="index">
            <image class="banner" :src="img" mode="aspectFill"></image>
          </swiper-item>
        </swiper>
      </view>
    </view>

    <!-- 服务分类 -->
    <view class="service-list">
      <view class="service-item" v-for="(item, index) in services" :key="index">
        <image class="service-icon" :src="item.icon"></image>
        <text class="service-text">{{ item.name }}</text>
      </view>
    </view>

    <!-- 门店服务 Banner -->
    <view class="section">
      <text class="section-text">门店服务</text>
      <image class="banner" src="/static/images/store-banner.jpg" mode="aspectFill"></image>
    </view>
  </view>
</template>

<script>
import request from '@/utils/request.js'

export default {
  data() {
    return {
      user: {},
      pets: [],
      services: [
        { name: "洗澡", icon: "/static/icons/wash.png" },
        { name: "修剪", icon: "/static/icons/trim.png" },
        { name: "护理", icon: "/static/icons/care.png" },
        { name: "寄养", icon: "/static/icons/boarding.png" }
      ],
      unloginBanners: [
        '/static/images/banner1.jpg',
        '/static/images/banner2.jpg',
        '/static/images/banner3.jpg'
      ]
    }
  },
  onShow() {
    this.loadUserProfile()
    this.loadPets()
  },
  methods: {
    async loadUserProfile() {
      const token = uni.getStorageSync('token')
      if (!token) return
      const res = await request({ url: '/system/user/profileWX', method: 'GET' })
      if (res.code === 200 && res.data) {
        this.user = res.data.user || {}
        uni.setStorageSync('user', this.user)
      }
    },
    async loadPets() {
      const user = uni.getStorageSync('user')
      if (!user || !user.userId) return
      const res = await request({ url: `/pet/list/${user.userId}`, method: 'GET' })
      if (res.code === 200) this.pets = res.data || []
    },
    goLogin() {
      uni.navigateTo({ url: '/pages/login/login' })
    },
    goPetManage() {
      uni.navigateTo({ url: '/pages/pet/index' })
    }
  }
}
</script>

<style scoped>
.container { padding: 20rpx; background: #f8f8f8; }

/* 用户卡片 */
.user-card {
  background: #fff;
  margin: 20rpx 0;
  padding: 20rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.avatar { width: 100rpx; height: 100rpx; border-radius: 50%; }
.user-info { flex: 1; margin-left: 20rpx; }
.phone { font-size: 32rpx; font-weight: bold; }
.member-info { font-size: 24rpx; color: #666; margin-top: 10rpx; }
.more { font-size: 40rpx; color: #000; padding: 0 20rpx; }

/* 未登录卡片 */
.login-card {
  background: #fff;
  margin: 20rpx 0;
  padding: 20rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.login-info { flex: 1; margin-left: 20rpx; }
.login-title { font-size: 32rpx; font-weight: bold; }
.login-btn { background: #ffb400; color: #fff; padding: 0 20rpx; }

/* 未登录 Banner */
.unlogin-banner { margin: 20rpx 0; }
.swiper { width: 100%; height: 300rpx; border-radius: 20rpx; overflow: hidden; }
.banner { width: 100%; height: 300rpx; }

/* 服务模块 */
.service-list { display: flex; justify-content: space-around; margin: 30rpx 0; flex-wrap: wrap; }
.service-item { width: 25%; text-align: center; margin-bottom: 20rpx; }
.service-icon { width: 80rpx; height: 80rpx; }
.service-text { margin-top: 10rpx; font-size: 28rpx; }

/* 门店服务 */
.section { margin-top: 40rpx; }
.section-text { font-size: 32rpx; font-weight: bold; margin-bottom: 20rpx; }
</style>
